<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">
          <!-- 条件搜索 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="上课日期" prop="date">
                    <a-month-picker v-model="queryParam.date" allow-clear placeholder="请选择上课日期" @change="changeTime"/>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="姓名">
                    <a-input v-model="queryParam.name"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="所在校区">
                    <a-tree-select
                      v-model="queryParam.deptId"
                      style="width: 100%"
                      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                      :tree-data="deptOptions"
                      placeholder="请选择上课校区"
                      :replaceFields="{children:'children', title:'label', key:'id', value: 'id' }	"
                      tree-default-expand-all
                    >
                    </a-tree-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 操作 -->
          <div class="table-operations">
            <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
            <!-- <a-button type="primary" @click="handleExport">
              <a-icon type="download" />导出
            </a-button> -->
            <table-setting
              :style="{float: 'right'}"
              :table-size.sync="tableSize"
              v-model="columns"
              :refresh-loading="loading"
              @refresh="getList" />
          </div>
          <!-- 数据展示 -->
          <a-table
            :loading="loading"
            :size="tableSize"
            rowKey="id"
            :columns="columns"
            :data-source="list"
            :pagination="false"
            :bordered="tableBordered"
          >
            <span slot="startTime" slot-scope="text, record">
              {{ parseTime(record.startTime,'{y}-{m}-{d}') }}
            </span>
            <span slot="endTime" slot-scope="text, record">
              {{ parseTime(record.endTime,'{y}-{m}-{d}') }}
            </span>
            <span slot="operation" slot-scope="text, record">
              <a-divider type="vertical"/>
              <a @click="toAttce(record)">
                <a-icon type="search" /> 出勤查询
              </a>
            </span>
          </a-table>
          <!-- 分页 -->
          <a-pagination
            class="ant-table-pagination"
            show-size-changer
            show-quick-jumper
            :current="queryParam.pageNum"
            :total="total"
            :page-size="queryParam.pageSize"
            :showTotal="total => `共 ${total} 条`"
            @showSizeChange="onShowSizeChange"
            @change="changeSize"
          />
      </a-row>
    </a-card>


    <!-- 出勤查询 -->
    <a-modal v-model="openAttce" title="教练出勤查询" @cancel="openAttce=false" width="900px">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="日期" >
                <a-date-picker
                   @change="getAttceList"
                    v-model="attceQueryForm.validity"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :style="{ width: '100%' }"
                    placeholder="请选择日期"
                    allow-clear
                  />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        :loading="attceLoading"
        rowKey="id"
        :columns="attceColumns"
        :data-source="attceList"
        :pagination="false"
        :bordered="tableBordered"
      >
      </a-table>
    </a-modal>

  </page-header-wrapper>
</template>

<script>
import { teacherDuty,teacherAttceQuery } from '@/api/manager/managerUser'
import { tableMixin } from '@/store/table-mixin'
import { treeselect } from '@/api/system/dept'
import moment from 'moment'

export default {
  name: 'Teacher',
  mixins: [tableMixin],
  data () {
    return {
      openAttce:false,
      attceQueryForm:{},
      studentInfo:{},
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      // 班级类型字典
      scheduleTypeOptions: [],
      // 状态字典
      statusOptions: [],
      // 部门树选项
      deptOptions: [{
        id: 0,
        label: '',
        children: []
      }],
      // 查询参数
      queryParam: {
        date:'',
        pageNum: 1,
        pageSize: 10
      },
      attceList:[],
      attceLoading:false,
      attceColumns:[
        {
          title: '校区',
          dataIndex: 'deptName',
          ellipsis: true,
          align: 'center'
        },{
          title: '教练',
          dataIndex: 'userName',
          ellipsis: true,
          align: 'center'
        },{
          title: '身份',
          dataIndex: 'type',
          ellipsis: true,
          align: 'center'
        },{
          title: '课程',
          dataIndex: 'scheduleType',
          ellipsis: true,
          align: 'center'
        },{
          title: '上课日期',
          dataIndex: 'validity',
          ellipsis: true,
          align: 'center'
        },{
          title: '上课时间',
          dataIndex: 'scheduleInfo',
          ellipsis: true,
          align: 'center'
        }
      ],
      columns: [
        {
          title: '校区',
          dataIndex: 'deptName',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '教练',
          dataIndex: 'name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '主教次数',
          dataIndex: 'bishopCount',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '助教次数',
          dataIndex: 'assistantCount',
          ellipsis: true,
          align: 'center'
        },
        // {
        //   title: '普通课次数',
        //   dataIndex: 'normalClass',
        //   ellipsis: true,
        //   align: 'center'
        // },{
        //   title: '私教课次数',
        //   dataIndex: 'privateClass',
        //   ellipsis: true,
        //   align: 'center'
        // },
        {
          title: '总次数',
          dataIndex: 'totalCount',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
    }
  },
  filters: {
  },
  created () {
    this.queryParam.date = moment().format('YYYY-MM') 
    this.getList()
    this.getTreeselect();
  },
  computed: {
  },
  watch: {
  },
  methods: {
    changeTime(val){
      this.queryParam.date = val.format('YYYY-MM') 
    },
    toAttce(item){
      this.openAttce = true;
      this.attceQueryForm.userId = item.id;
      this.attceQueryForm.scheduleDate = this.queryParam.date;
      this.getAttceList();
    },
    getAttceList(){
      teacherAttceQuery(this.attceQueryForm).then(resp => {
        this.attceList = resp.rows;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    timeChange(value,dateString){
      this.queryParam.startTime = dateString[0];
      this.queryParam.endTime = dateString[1];
    },
    /** 查询课程信息列表 */
    getList () {
      this.loading = true
      teacherDuty(this.queryParam).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        scheduleType: undefined,
        scheduleDate: undefined,
        start: undefined,
        end: undefined,
        teacherCount: undefined,
        studentCount: undefined,
        status: undefined,
        deptId: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      if(!this.queryParam.deptId){
        this.$message.error(
          '请选择校区',
          3
        )
        return
      }
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('manager/studentCard/incomeExport', {
            ...that.queryParam
          }, `收入结转.xlsx`)
        },
        onCancel () {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
